<template>
  <div class="mobile">
    <div class="m-bar">
      <el-row>
        <el-col :span="22">{{ salon.sname }} - {{ deptId | fltRole }}</el-col>
        <el-col :span="2"><van-icon name="cross" @click="logout" /></el-col>
      </el-row>
    </div>
    <div class="m-summary">
      <p style="margin-top: 5px">{{ name }}</p>
      <p style="color: gray; margin-top: 5px">本月积分：{{ score.score }}</p>
    </div>
    <!-- <router-view /> -->
    <!-- <van-tabbar route>
      <van-tabbar-item to="/mobile/shopkeeper/money" icon="balance-o">业绩</van-tabbar-item>
      <van-tabbar-item to="/mobile/shopkeeper/cost" icon="shop-o">成本</van-tabbar-item>
      <van-tabbar-item to="/mobile/shopkeeper/approve" icon="shop-o">审批</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Tabbar from 'vant/lib/tabbar';
import TabbarItem from 'vant/lib/tabbar-item';
import 'vant/lib/tabbar/style';
import 'vant/lib/tabbar-item/style';
import { getSalon } from '@/api/txs';
import { getScoreByUidAndSdate } from '@/api/ym';

export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  filters: {
    fltRole(role) {
      switch (role) {
        case 205:
          return '门店财务';
        case 206:
          return '医生';
        case 207:
          return '护士';
        case 208:
          return '美容师';
      }
    },
  },
  data() {
    return {
      salon: {
        sname: '',
      },
      score: {
        score: 0,
      },
    };
  },
  computed: {
    ...mapGetters(['openId', 'name', 'id', 'deptId']),
  },
  created() {
    this.fetchData();
    const date = new Date();
    const sdate = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2);
    getScoreByUidAndSdate(this.id, sdate).then(res => {
      if (res.data.data) {
        this.score = res.data.data;
      }
    });
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout').then(res => {
        this.$router.push(`/login`);
      });
    },
    fetchData() {
      getSalon(this.openId).then(res => {
        this.salon = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mobile {
  background-color: #f7f8fa;
  height: 100%;
  .m-bar {
    background-color: #fff;
    color: #c31171;
    font-size: 30px;
    line-height: 80px;
    text-align: center;
    box-shadow: 0px 0px 10px rgb(201, 201, 201);
    margin-bottom: 10px;
  }
  .m-summary {
    display: flex;
    font-size: 30px;
    // line-height: 80px;
    // margin-bottom: 20px;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px 0 50px;
  }
}
</style>
